<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>报价模板管理</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
    </style>
  </head>
  <body>
    <div id="q-quoteTempManage" v-cloak>
      <q-layout>
        <q-page-container>
          <q-card class="bg-white no-shadow full-width">
            <q-card-main class="q-px-md q-py-sm relative-position">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('编码')"
                    v-model.trim="searchForm.search1"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('模板名称')"
                    v-model.trim="searchForm.search2"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-select
                    :float-label="$t('模板状态')"
                    :options="statusOptions"
                    v-model.trim="searchForm.search3"></q-select>
                </q-field>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  push
                  color="primary"
                  :loading="btnLoadingSearch"
                  @click="search"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    搜索中
                  </span>
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  push
                  color="secondary"
                  :loading="btnLoadingReset"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    重置中
                  </span>
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="tableData"
                dense
                hide-bottom
                :columns="columns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading="listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="listGet"
                row-key="id"
              >
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('启用')"
                    @click="startOrStop(1)"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('禁用')"
                    @click="startOrStop(0)"
                    class="q-mr-sm" ></q-btn>
                </template>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        size="xs"
                        color="primary"
                        class="q-pa-xs"
                        @click="viewTemp(props.row.id)"
                      >
                        {{ $t('预览') }}
                      </q-btn>
                    </q-td>
                    <q-td key="code" :props="props" >
                      {{ props.row.code }}
                    </q-td>
                    <q-td key="name" :props="props" >
                      {{ props.row.name }}
                    </q-td>
                    <!-- <q-td key="col3" :props="props" >
                      {{ props.row.col3 }}
                    </q-td> -->
                    <q-td key="status" :props="props" >
                      <q-chip v-if="props.row.status == 1" dense square color="positive">已启用</q-chip>
                      <q-chip v-if="props.row.status == 0" dense square color="negative">已禁用</q-chip>
                    </q-td>
                    <q-td key="createTime" :props="props" >
                      {{ props.row.createTime }}
                    </q-td>
                    <q-td key="createUserName" :props="props" >
                      {{ props.row.createUserName }}
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <div class="row justify-end items-center text-faded">
                每页的行数：
                <q-select 
                  :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                  hide-underline
                  class="q-mr-md"
                  v-model="serverPagination.rowsPerPage"></q-select>
                第
                <q-pagination
                  class="q-mt-xs"
                  v-model="serverPagination.page"
                  input
                  boundary-links
                  direction-links
                  :max-pages="5"
                  :ellipses="true"
                  :max="pages"></q-pagination>
                页 &nbsp; 共 {{ total }} 条
              </div>
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
            </q-card-main>
          </q-card>
        </q-page-container>
      </q-layout>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/quoteTempManage.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
			new Vue({
        el: '#q-quoteTempManage',
        i18n: i18n,
				data: function() {
					return {
            // 各种options
            statusOptions: [
              {
                label: '启用',
                value: 1
              },
              {
                label: '禁用',
                value: 2
              }
            ],

            // 
            visible: false,
            listLoading: false,
            btnLoadingReset: false,
            btnLoadingSearch: false,
            tableData: [],
            selected: [],
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              rowsNumber: 10
            },
            total: 0,
            searchForm: {
              search1: '',
              search2: '',
              search3: ''
            },
          }
				},
				computed: {
          columns: function() {
						return [
              {
                name: 'action',
                label: '操作',
                align: 'center'
              },
              {
                name: 'code',
                label: '编码',
                align: 'center'
              },
              {
                name: 'name',
                label: '模板名称',
                align: 'center'
              },
              // {
              //   name: 'col3',
              //   label: '品类',
              //   align: 'center'
              // },
              {
                name: 'status',
                label: '模板状态',
                align: 'center'
              },
              {
                name: 'createTime',
                label: '创建时间',
                align: 'center'
              },
              {
                name: 'createUserName',
                label: '创建人',
                align: 'center'
              }
						]
          },
          pages: function() {
            return Math.ceil(this.total/this.serverPagination.rowsPerPage)
          }
        },
        watch: {
          'serverPagination.rowsPerPage': function(rowsPerPage) {
            this.listGet({ pagination: this.serverPagination })
          },
          'serverPagination.page': function(page) {
            this.listGet({ pagination: this.serverPagination })
          }
        },
        created: function() {
          this.listGet({ pagination: this.serverPagination })
        },
				methods: {
          listGet: function(arg) {
            var that = this
            this.listLoading = true
            this.visible = true
            this.serverPagination = arg.pagination
            axios({
              method: 'post',
              url: '/manager/rfq/template/query',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                'search-LIKE_search1': this.searchForm.search1,
                'search-LIKE_search2': this.searchForm.search2,
                'search-LIKE_search3': this.searchForm.search3,
              }
            })
            .then(function(data) {
              that.tableData = data.rows
              that.total = data.total
              that.listLoading = false
              setTimeout(function() {
                that.visible = false
              }, 500)
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          search: function() {
            this.btnLoadingSearch = true
            this.listGet({ pagination: this.serverPagination })
          },
          reset: function() {
            this.btnLoadingReset = true
            this.searchForm = {  
              search1: '',
              search2: '',
              search3: ''
            }
            this.listGet({ pagination: this.serverPagination })
          },
          // 启用 禁用 
          startOrStop: function(type) {
            var that = this
            if (this.selected.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要' + (type==1?'启用': '禁用') + '选中的'+ this.selected.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selected.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '/manager/rfq/template/updateStatus/'+ type,
                  data: {
                    ids: idSelected.join(',')
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                    that.selected = []
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                  that.listGet({ pagination: that.serverPagination })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                timeout: 1000,
                position: 'top-right'
              })
            }
          },
          viewTemp: function(id) {

          }
				}
			})
    </script>
  </body>
</html>